<template>
	<view class="address-sort">
		<view class="block">
			<view class="item">
				<view class="title">收货人</view>
				<input class="input" type="text" v-model="dataObj.name" maxlength="20" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="title">手机号码</view>
				<input class="input" type="mobile" v-model="dataObj.mobile" maxlength="11" placeholder="请填写收货人手机号" />
			</view>
			<view class="item">
				<view class="title">详细地址</view>
				<textarea class="textarea" maxlength="38" v-model="dataObj.address" placeholder="请填写收货人详细地址" />
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="onSaveTap">保存并使用</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip, checkMobileReg } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					id: '',
					name: '',
					mobile: '',
					address: ''
				}
			}
		},
		onLoad(event) {
			const id = event['id']; // 获取页面数据类型
			if (id) {
				this.dataObj['id'] = id;
				this.getData();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			onSaveTap() {
				this.checkField(() => {
					this.postData();
				});
			},
			// 提交数据
			postData() {
				const data = this.dataObj;
				console.log(data, 'data');
				let reqUrl = '';
				let reqData = {
					area_id: 1,
					name: data['name'],
					mobile: data['mobile'],
					ship: data['address']
				};
				if (data['id']) {
					// 编辑
					reqUrl = this.$Api['address']['edit'];
					reqData['id'] = data['id'];
				} else {
					// 新增
					reqUrl = this.$Api['address']['add'];
				}
				this.$Requset({
					url: reqUrl,
					data: reqData,
					success: (res) => {
						const { msg, status } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						uni.navigateBack();
					},
					fail: (err) => {
						requestErrorTip('toast', msg);
					}
				})
			},
			 // 校验提交字段
			checkField(cb) {
				const data = this.dataObj;
				if (data['name'] === '') {
					requestErrorTip('toast', '请填写收货人姓名');
					return false;
				}
				if (data['mobile'] === '') {
					requestErrorTip('toast', '请输入手机号');
					return false;
				}
				if (!checkMobileReg(data['mobile'])) {
					requestErrorTip('toast', '请输入正确的手机号');
					return false;
				}
				if (data['address'] === '') {
					requestErrorTip('toast', '请填写收货人详细地址');
					return false;
				}
				// 校验通过，发起回调并请求接口
				cb && cb();
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['address']['detail'],
					data: {
						id: this.dataObj['id']
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['name'] = data['name'];
						this.dataObj['mobile'] = data['mobile'];
						this.dataObj['address'] = data['address'];
					},
					fail: (err) => {
						requestErrorTip('toast', msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.address-sort{
		padding-top: 18rpx;
		.block{
			.item{
				position: relative;
				padding: 0 0 32rpx 156rpx;
				margin-bottom: 32rpx;
				border-bottom: 1rpx solid #EAEFF1;
				&:nth-last-child(1){
					border-bottom: none;
					margin-bottom: 0;
					padding-bottom: 0;
				}
				.title{
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #1A1A1A;
				}
				.input{
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #1A1A1A;
				}
				.textarea{
					width: 100%;
					height: 80rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					color: #1A1A1A;
				}
			}
		}
		.footer{
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			padding: 15rpx 36rpx;
			background-color: #FFFFFF;
			border-top: 1rpx solid #E4EAED;
			.btn{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
		}
	}
</style>
